<template>
  <div class="home">
    <van-search v-model="searchVal" placeholder="请输入搜索关键词"  disabled
      @click="openSearcch"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
      <van-swipe-item v-for="item in bannerList" :key="item.id">
         <img :src="item.image_url" width="100%" :style="{display:'block'}"/>
      </van-swipe-item>
      
    </van-swipe>

    <!-- 增加一个遮罩层 -->
    <transition name="van-fade">
    <div class="popup-shadow" v-show="$store.state.isShowShadow"></div>
    </transition>
    <!-- van-slide-right内置样式 -->
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>

    
  </div>
</template>

<script>
// @ is an alias to /src
import { getHomeList } from '@/request/api'
export default {
   data() {
    return {
      searchVal: "",
      bannerList:[],

    };
  },
  created(){
    getHomeList()
    .then(res=>{
      console.log(res)
      this.bannerList = res.data.banner
    }).catch(err=>{
      console.log(err)
    })
  },
  methods:{
   openSearcch(){
      this.$store.commit('changeIsShowShadow',true)
      this.$router.push('/home/searchPopup')
   }
  }
}
</script>
<style lang="less">
//  .my-swipe .van-swipe-item {
//     color: #fff;
//     font-size: 20px;
//     // line-height: 150px;
//     text-align: center;
//     background-color: #39a9ed;
//   }

  // vue自带写法
  // .slide-enter,.slide-leave-to{
  //   // 过度开始前样式
  //   right: -100%;
  // }
  // .slide-enter-active,.slide-leave-active{
  //   // 过渡属性样式
  //     transition: right 0.3s;
  // }
  // .slide-enter-to,.slide-leave{
  //   // 过渡结束后属性
  //   right: 0;
  // }

.popup-shadow{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 88;
}
</style>
